<template>
  <div class="app-container org">
    <!-- 左侧区域 -->
    <el-card class="leftCard">
      <el-tabs v-model="activityName" class="demo-tabs">
        <el-tab-pane label="未完成" name="first">
          <isComplete
            v-if="activityName == 'first'"
            :userStatus="0"
            :userStepId="0"
          />
        </el-tab-pane>
        <el-tab-pane label="已完成" name="second">
          <isComplete
            v-if="activityName == 'second'"
            :userStatus="1"
            :userStepId="0"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 右侧区域 -->
    <el-card class="rightCard">
      <p class="pinformation">当前方案信息</p>
      <el-form label-width="80" :model="form">
        <el-row>
          <el-col :span="7">
            <el-form-item label="方案编号：">
              {{ form.contractCode }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="方案名称：" label-width="120">
              {{ form.contractName }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="方案类型：">
              {{ form.contractType }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="委托单位：" prop="wtCustomName">
              {{ form.wtCustomName }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="要求完成时间："
              prop="endTime"
              label-width="120"
            >
              {{ form.endTime }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <p class="pinformation">采样地图</p>
      <el-form label-width="80" :model="form">
        <el-row>
          <el-col :span="7">
            <el-form-item label="点位名称：">
              <el-select
                v-model="value"
                placeholder="请选择点位名称"
                style="width: 100%"
              >
                <el-option label="点位1" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="采样日期：" label-width="120">
              {{ form.contractName }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-row style="padding-bottom: 5px">
              <el-button type="success" @click="handleQuery">搜索</el-button>
              <el-button class="business resetBtn" @click="resetQuery"
                >重置</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <div
        :style="'height:' + height + 'px'"
        style="width: 100%"
        id="sampleMapData"
      ></div>
    </el-card>
  </div>
</template>

<script setup name="SampleWith">
import { onMounted } from "vue";
import isComplete from "./components/isComplete";

const activityName = ref("first");
const form = ref({});
const height = ref(0)

var map = null;
function getMap() {
  map = new T.Map("sampleMapData");
  var lnglat = new T.LngLat(117.00005, 36.659565);
  map.centerAndZoom(lnglat, 12);
  var res = [
    { lng: 116.95065, lat: 36.699565, pointName: "无" },
    { lng: 116.90065, lat: 36.649565, pointName: "无" },
    { lng: 117.00065, lat: 36.599565, pointName: "无" },
    { lng: 117.08065, lat: 36.609565, pointName: "无" },
    { lng: 117.07065, lat: 36.709565, pointName: "无" },
    { lng: 117.05065, lat: 36.629565, pointName: "无" },
    { lng: 116.96065, lat: 36.639565, pointName: "无" },
  ];
  res.forEach((item) => {
    handleMapView(item.lng, item.lat, item.pointName);
  });
}

function handleMapView(lng, lat, point1) {
  var marker = new T.Marker(new T.LngLat(lng, lat));
  var label = new T.Label({
    text: point1,
    position: new T.LngLat(lng, lat),
    offset: new T.Point(0, -20),
  });
  map.addOverLay(label);
  map.addOverLay(marker); // 将标注添加到地图中
  marker.setIcon(
    new T.Icon({
      iconSize: new T.Point(32, 32),
      iconAnchor: new T.Point(16, 32),
    })
  ); // 设置标记点的图标、尺寸和锚点偏移量
}

function getHeight() {
  var box = document.getElementById("sampleMapData");
  var boxDistanceFromTop = box.getBoundingClientRect().top;
  height.value = window.innerHeight - boxDistanceFromTop - 21;
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
    nextTick((res) => {
      getMap()
    })
  });
})

onUpdated(() => {
  nextTick(() => {
    getHeight();
    nextTick(() => {
      getMap();
    });
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});


</script>

<style></style>
